<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="keywords" content="Editor.md,editor,Markdown Editor,Markdown,编辑器,Markdown编辑器,Markdown在线编辑器,在线编辑器,开源编辑器,开源Markdown编辑器" />
    <meta name="description" content="Editor.md: a simple online markdown editor. 开源在线 Markdown 编辑器" />
    <title><#if article??>${article.titleName}</#if></title>
    <link rel="stylesheet" href="/md/css/editormd.css" />
    <link rel="stylesheet" href="/md/css/style.css" />
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <style>
        .mark_selection_box {
            position: absolute;
            left: 20px;
            top: 34px;
            width: 400px;
            height: auto;
            z-index: 2006;
            background: #fff;
            -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
            box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
            border: 1px solid #e3e3e3;
            padding: 10px 15px;
        }
        .label {
            margin: 2px 4px;
            border: none
        }
    </style>
</head>
<body>
<div id="layout">
    <div id="updateDiv" style="display: none">
        <input id="alert" type="button" value="Alert" />
        <input id="confirm" type="button" value="Confirm" />
        <textarea id="content"><#if article??>${article.content}</#if></textarea>
    </div>
    <div class="modal fade" id="viewDialog" role="viewDialog" aria-hidden="true">
        <div class="modal-dialog modal-full">
            <div class="modal-content">
                <div class="modal-header" style="padding:10px !important;padding-bottom:5px;border-bottom:0px !important;">
                    发布文章
                </div>
                <div class="modal-body mask-layer-imgbox" style="padding-top:0px;text-align:left;font-size: 16px"><!-- height:480px;width:600px -->
                    <div class="form-group row">
                        <label class="col-lg-3 control-label">文章标签：</label>
                        <div class="labels">
                            <#if labels??>
                                <#list labels as label>
                                    <button type="button" class="btn btn-default label">${label.labelName}</button>
                                </#list>
                            </#if>
                        </div>
                        <button type="button" id="addLabel" class="btn btn-default">+添加文章标签</button>
                    </div>
                    <div class="mark_selection_box" style="display: none">
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-3 control-label">文章类型：</label>
                        <div class="col-lg-5">
                            <select id="type" class="form-control" style="height:32px;font-size:14px;padding:3px 6px">
                                <option value ="1">自创</option>
                                <option value ="2">转载</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-3 control-label">发布形式：</label>
                        <div class="col-lg-5">
                            <select id="isPublic" class="form-control" style="height:32px;font-size:14px;padding:3px 6px">
                                <option value ="0">不公开</option>
                                <option value ="1">公开</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" id="releaseArticle">发布文章</button>
                </div>
            </div>
        </div>
    </div>
    <header>
        <div>
            <label class="form-label">标题:</label>
            <input class="col-lg-9" type="text" id="title" placeholder="请输入标题" value="<#if article??>${article.titleName}</#if>">
            <button id="saveDraft" type="button" class="col-lg-1 btn btn-default">保存草稿</button>
            <button id="prepareRelease" type="button" class="col-lg-1 btn btn-default">发布文章</button>
        </div>
    </header>
    <div id="test-editormd"></div>
</div>
<script src="/adminlte/plugins/jquery/jquery.min.js"></script>
<script src="/md/editormd.min.js"></script>
<script src="/js/alert.js"></script>
<!-- Bootstrap 4 -->
<script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/adminlte/dist/js/adminlte.min.js"></script>
<script type="text/javascript">
    let testEditor;
    let articleId = "<#if article??>${article.id?c}</#if>";
    //设置type初始值
    let type = "<#if article??>${article.type}</#if>";
    if(typeof(type) == undefined || type==null || type==""){
    }else{
        $("#type").val(type);
    }
    //设置isPublic初始值
    let isPublic = "<#if article??>${article.isPublic}</#if>";
    if(typeof(isPublic) == undefined || isPublic==null || isPublic==""){
    }else{
        $("#isPublic").val(isPublic);
    }

    $(function() {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 800,
            path : '/md/',
            theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            markdown : $("#content").text(),
            codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm: true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "png"],
            imageUploadURL : "/upload/image",
            onload : function() {
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });

        //点击区域外的时候触发隐藏
        $(document).bind("click", function(e) {
            var target = $(e.target);
            if (target.closest(".mark_selection_box").length == 0 && target.closest("#addLabel").length == 0
                && target.closest(".label").length == 0) { //点击id之外的地方触发
                //do something...
                $(".mark_selection_box").css('display','none');
            }
        })
        //弹窗的初始化高度
        let initialHeight = 280;
        $("#addLabel").bind("click", function(){
            //获取当前窗口的高度，初始285px
            let modelHeight = parseInt($(".modal-content").css("height"));
            let boxTop = parseInt($(".mark_selection_box").css("top"));
            $(".mark_selection_box").css('top', boxTop+modelHeight-initialHeight);
            //添加标签
            let box = $(".mark_selection_box");
            if(box.css("display") == 'none') {
                $(".mark_selection_box").css('display','block');
                //读取已经选中的标签
                let labelNames = new Array();
                $('.label').each(function() {
                    labelNames.push($(this).text());
                })
                $.ajax({
                    url: "/share/label/findAll",
                    type: 'GET',
                    success: function(result) {
                        let btns = "";
                        result.data.forEach(function(d){
                            if($.inArray(d, labelNames)<0){
                                btns += "<button type=\"button\" class=\"btn labelBtn\">"+d+"</button>";
                            }else{
                                btns += "<button type=\"button\" class=\"btn labelBtn disabled\">"+d+"</button>";
                            }
                        })
                        $(".mark_selection_box").html(btns);
                        $(".labelBtn").bind("click", function(){
                            if($(this).hasClass("disabled")){return;}
                            //添加到标签
                            let label = "<button type=\"button\" class=\"btn btn-default label\">"+$(this).text()+"</button>";
                            $(".labels").append(label);
                            $(this).addClass("disabled");
                            //判定位置
                            modelHeight = parseInt($(".modal-content").css("height"));
                            $(".mark_selection_box").css('top', boxTop+modelHeight-initialHeight);

                            initLabelClick();
                        })
                        labelFlag = 1;
                    }
                })
            }else{
                $(".mark_selection_box").css('display','none');
            }
        })

        //label标签的点击事件
        function initLabelClick() {
            $(".label").bind('click', function(){
                $(this).remove();
                let labelName = $(this).text();
                $(".labelBtn").each(function() {
                    if($(this).text() == labelName){
                        $(this).removeClass("disabled");
                    }
                })
            })
        }
        initLabelClick();

        //保存草稿
        $("#saveDraft").bind("click", function(){
            let mdtext = testEditor.getMarkdown();
            let title = $("#title").val();
            if(typeof(title)==undefined || title==null || title==""){
                myAlert('系统提示',"标题不能为空");
                return;
            }
            if(typeof(mdtext)==undefined || mdtext==null || mdtext==""){
                myAlert('系统提示',"内容不能为空");
                return;
            }
            $.ajax({
                url:"/share/article/addDraft",
                type: 'POST',
                data: {
                    mdtext: mdtext,
                    title: title,
                    id: articleId
                },
                dataType: 'json',
                success: function(result) {
                    myAlert('系统提示', result.message, function(){
                        window.close();
                    });
                }
            })
        })

        //弹出发布窗口
        $("#prepareRelease").bind("click", function(){
            $('#viewDialog').modal({
                backdrop:"static",
                keyboard:false,
                show: true
            });
        })

        //发布文章
        $("#releaseArticle").bind('click', function(){
            let mdtext = testEditor.getMarkdown();
            let title = $("#title").val();
            if(typeof(title)==undefined || title==null || title==""){
                myAlert('系统提示',"标题不能为空");
                return;
            }
            if(typeof(mdtext)==undefined || mdtext==null || mdtext==""){
                myAlert('系统提示',"内容不能为空");
                return;
            }
            let labelNames = new Array();
            $(".label").each(function(){
                labelNames.push($(this).text());
            })
            if(labelNames.length == 0){
                myAlert('系统提示',"请选择标签");
                return;
            }
            let type = $("#type").val();
            let isPublic = $("#isPublic").val();
            $.ajax({
                url:"/share/article/add",
                type: 'POST',
                data: {
                    mdtext: mdtext,
                    title: title,
                    type: type,
                    isPublic: isPublic,
                    labelNames: labelNames,
                    id: articleId
                },
                dataType: 'json',
                success: function(result) {
                    myAlert('系统提示', result.message, function(){
                        window.close();
                    });
                }
            })
        })
    });
</script>
<style>#cnzz_stat_icon_1254310986{display: none;}</style>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1254310986'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1254310986%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>
